<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath %>">
    <meta charset="utf-8">

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="js/layui/css/layui.css"  media="all">
</head>
<body>


<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;font-size: large">
    <legend>项目分类</legend>
</fieldset>

<button  type="button" style="margin:0 auto " lay-active="addategory" class="layui-btn layui-btn-lg"><i class="layui-icon"></i>添加分类</button>

<div id="ategoryList" class="demo-tree demo-tree-box" style="margin-top:20px;width: 400px; height: 600px; overflow: auto;font-size: 120% "></div>

<script src="js/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['tree','util'], function(){
        var tree = layui.tree
            ,layer = layui.layer
            ,util = layui.util
            ,$=layui.jquery;

        util.event('lay-active',{  // 带有lay-active 属性的标签出发事件  添加分类按钮
            addategory:function () {
                layer.open({
                    title: false,
                    type: 2,
                    area: ['500px', '500px'],
                    content: 'Ategory/toAtegoryAdd?id=0',
                    cancel: function(){ //控制右上角的关闭
                        //点击时刷新页面
                        location.reload();
                    }
                });
            }
        })

        //开启节点操作图标
        tree.render({
            elem: '#ategoryList'
            , data: getData()
            ,id:'ategory'
            , edit: ['add', 'update', 'del'] //操作节点的图标
            , showLine: true  //是否开启连接线
            , isJump: true  //link 为参数匹配
            , click: function (obj) {
                //layer.msg(JSON.stringify(obj.data));
                layer.msg(JSON.stringify(obj.data.brief),{
                    offset: '200px'
                    ,anim: 6

                })//点击分类 显示 分类的brief属性
            }
            , operate: function (obj) {
                var type = obj.type; //得到操作类型：add、edit、del
                var data = obj.data; //得到当前节点的数据
                var elem = obj.elem; //得到当前节点元素
                //Ajax 操作
                var id = data.id; //得到节点索引

                if (type === 'add') { //增加节点
                    layer.open({
                        title: false,//弹出层的title不显示
                        type: 2,
                        area: ['500px', '500px'],
                        content: 'Ategory/toAtegoryAdd?id=' + id,
                        cancel: function(){ //控制右上角的关闭
                            //点击时刷新页面
                            tree.reload('ategory');
                        }
                    });
                } else if (type === 'update') { //修改节点
                    layer.open({
                        title: false,//弹出层的title不显示
                        type: 2,
                        area: ['500px', '500px'],
                        content: 'Ategory/toAtegoryUpd?id='+ data.id+'&title='+data.title+'&brief='+data.brief,
                        cancel: function(){ //控制右上角的关闭
                            //点击时刷新页面
                            tree.reload('ategory');
                        }
                    });

                } else if (type === 'del') { //删除节点

                    if (obj.data.children != "" && obj.data.children != null) { //当前节点下是否有子节点
                        layer.alert("请先删除子分类后再进行操作！",function () {
                            location.reload();
                        });
                    }
                    else {//如果没有子节点  执行删除请求
                            var url = "Ategory/delAtegory?id=" + id;
                            $.get(url, function (data) {
                                if(data.statusCode==300){ //返回状态码为300则说明分类存在项目
                                   layer.alert("该分类下存在项目，无法删除",function () {
                                       location.reload();
                                   })
                                }
                            });
                    }
                }
            }
        })
    });
    function getData() {//获取项目分类数据
        var $ =layui.jquery

        var data=[]
        $.ajax({
            url: "Ategory/tree",    //后台数据请求地址
            type:"GET",
            datatype:"json",
            async:false,
            success:function(result){
                       data = result.data
            }
        })
        ;
        return data;
    }
</script>

</body>
</html>